<template>
  <fwb-table hoverable id="table">
    <fwb-table-head>
      <fwb-table-head-cell class="relative headCell" v-for="v in tableHeadCell" :key="v.name"
                           @mouseleave="handleMouseLeave(v.id)" @mouseenter="handleMouseEnter(v.id)">
        {{ v.name }}
        <svg-icon v-show="headCell == v.id" name="id" width="13.33px" height="16px"
                  class="svg absolute right-[10px] s4k:right-[20px]"></svg-icon>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row v-for="v in tableData" :key="v.id" @mouseenter="rowMouseEnter(v)" @mouseleave="rowMouseLeave(v)">
        <fwb-table-cell class="w-[120px] s2k:w-[160px] s4k:w-[240px]">{{ v.date }}</fwb-table-cell>
        <fwb-table-cell>{{ v.time }}</fwb-table-cell>
        <fwb-table-cell class="relative">
          <span class="text-[var(--theme-font-color)]">{{ v.event }}</span>
          <img v-if="v.imgUrl == 1" class="absolute left-[-20px] top-[50%] transform -translate-y-1/2 s2k:left-[-36px]" :src="dele" alt="">
          <img v-else-if="v.imgUrl == 2" class="absolute left-[-20px] top-[50%] transform -translate-y-1/2 s2k:left-[-36px]" :src="change" alt="">
          <img v-else-if="v.imgUrl == 3" class="absolute left-[-20px] top-[50%] transform -translate-y-1/2 s2k:left-[-36px]" :src="camera" alt="">
          <img v-else-if="v.imgUrl == 4" class="absolute left-[-20px] top-[50%] transform -translate-y-1/2 s2k:left-[-36px]" :src="login" alt="">
          <img v-else-if="v.imgUrl == 5" class="absolute left-[-20px] top-[50%] transform -translate-y-1/2 s2k:left-[-36px]" :src="logout" alt="">
        </fwb-table-cell>
        <fwb-table-cell class="w-[full] text-start" >
          <p class="text-start">{{ v.details }}</p>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbCheckbox,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from "flowbite-vue";
import { onMounted, reactive, ref, watch } from "vue";
import dele from "@/assets/image/dele.png";
import change from "@/assets/image/change.png";
import camera from "@/assets/image/camera.png";
import login from "@/assets/image/login.png";
import logout from "@/assets/image/logout.png";
const imgUrl = ref("https://picsum.photos/93/56?");
const checkAll = ref(false); // 全选
const selectedItems = ref([]); // 多个
const headCell = ref(0);
const handleMouseLeave = (num) => {
  headCell.value = 0;
};
const handleMouseEnter = (num) => {
  headCell.value = num;
};
const tableHeadCell = ref([
  {
    id: 1,
    name: "DATE",
  },
  {
    id: 2,
    name: "TIME",
  },
  {
    id: 3,
    name: "EVENT",
  },
  {
    id: 4,
    name: "DETAILS",
  },
]);
// 表格数据
const tableData = ref([]);
const imgArr = [1, 2, 3, 4, 5]
for (let i = 0; i < 10; i++) {
  tableData.value.push({
    id: i + 1,
    date: '13/02/2024',
    time: '12:00:44',
    event: 'Hard disk failure',
    details: 'Primary disk failed. Error 404. Please reconnect device and try again.',
    imgUrl: getRandom(imgArr)
  });
}
const downloadShow = ref(0) // 下载下拉框
// 行内鼠标移入
const rowCell = ref(0);
const rowMouseEnter = (obj) => {
  rowCell.value = obj.id;
  // obj.state = true
};
const rowMouseLeave = (obj) => {
  rowCell.value = 0;
  // obj.state = false
};
function getRandom(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}


onMounted(() => {
  // const element = document.getElementById('table');
  // const distanceToTop = element.getBoundingClientRect().top;
  // console.log('distanceToTop',distanceToTop) // 133
});
// defineExpose({
//   selectedItems
// })
</script>

<style scoped lang="scss">
.svgDownload {
  color: #3f83f8;
}

#table {
  margin-top: 16px;
  border-radius: 0;
  // height: 79vh;
  height: calc(100vh - 133px - 64px); // 表格到顶部的距离 + 分页高度
  z-index: 1;

  :deep(table) {
    border-collapse: collapse;
  }

  background-color: var(--theme-right);

  th {
    color: #9ca3af;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: var(--theme) !important;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border: solid var(--theme) !important;
  }

  .headCell {
    &:hover {
      background-color: #192130;
    }
  }

  tr {
    height: 56px;
    background-color: var(--theme-right);
    padding: 0;
    font-size: 1.13rem;
    font-weight: 400;
    border-bottom: solid var(--grid) 1px;

    td {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #9CA3AF;
      margin: 100px !important;
      height: 30px;
    }

    &:hover {
      cursor: pointer;
      background-color: var(--theme-hover);
    }

    .col {
      font-size:1.13rem;
      font-weight: bold;
    }
  }

  .selectTr {
    background-color: var(--theme);

    &:hover {
      background-color: var(--theme);
    }
  }

  // :deep(.bg-white){
  //   &:hover{
  //     background-color: red;
  //   }
  // }
}

#table::-webkit-scrollbar {
  width: 5px;
}

#table::-webkit-scrollbar-thumb {
  background-color: #6b7280;
  border-radius: 10px;
}

#table::-webkit-scrollbar-track {
  background-color: var(--grid);
  border-radius: 10px;
}

#checkAll {
  :deep(input) {
    border: solid var(--grid) 1px;
    background-color: var(--theme);
    cursor: pointer;
    font-size: 1.25rem;

    &:checked {
      background-color: #1a56db;
      border-color: #1a56db;
    }
  }
}

@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.4);
  }
  #checkAll {
    :deep(input) {
      width: 21.3px;
      height: 21.3px;
    }
  }
  #table {
    margin-top: 21.3px;
    height: calc(100vh - 263px);

    th {
      height: 66.6px;
    }

    tr {
      height: 74.6px;
      td {
      height: 50px;
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(2);
  }
  #checkAll {
    :deep(input) {
      width: 30px;
      height: 30px;
    }
  }
  #table {
    margin-top: 32px;
    height: calc(100vh - 266px - 128px);

    th {
      height: 100px;
    }

    tr {
      height: 112px;
      td {
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
  }
}
</style>
